<template>
	<!-- 订单页面 -->
	<!-- 2023/4/13赵笛 -->
	<view class="box">
		<view style="width:100%;height:40px;margin-top:30px;text-align:center;line-height:40px;background:#fff;">
			<u-icon @click="PopUpExitBox" name="arrow-left" size="22px" style="float:left;margin: 10px 0 0 10px;"></u-icon>
			<span style="font-weight: bold;margin-left: -25px;">确认订单</span>
		</view>
		<view class="view-box">
				<u-row>
					<u-col span="1">
						<u-icon name='map-fill' size='24' color="#E06181"></u-icon>
					</u-col>
					<u-col span="11">
						<view v-show="this.addressId===null">
							<view style="width: 100%;">
								<view style="width:90%;float:left;margin-top: 2px;">
									<span>暂未填写收货地址</span>
								</view>
								<view style="width:10%;float:left;">
									<u-icon @click="toAddressPage" name="arrow-right" size="22px"></u-icon>
								</view>
							</view>
						</view>
						<view v-show="this.addressId!==null">
							<view style="width: 90%;float:left;">
								<view style="width:100%;height:50px;overflow:hidden;word-break:break-all;" class="text-title">
								{{address.addressLocationProvince}}
								{{address.addressLocationCity}}
								{{address.addressLocationCounty}}
								{{address.addressDetailed}}
								</view>
								<view class="text-dark">
									{{address.addressConsignee}}
									{{address.addressTelephoneShift}}
								</view>
							</view>
							<view style="width: 8%;float:left;">
								<u-icon @click="toAddressPage" customStyle="font-size:20px;position: relative;top:30px;" name="arrow-right"></u-icon>
							</view>
						</view>
					</u-col>
				</u-row>
		</view>
		<view class="view-box" v-for="commodity in commodityList">
			<u-row justify="space-between" gutter="10">
				<u-col span="3.5" >
					<u--image :showLoading="true" 
					:src="'http://101.43.223.224:8765/image/getImageById?id='+(commodity.imageId==null?'':commodity.imageId.split(',')[0])"
					 width="100px" height="100px" @click="click"></u--image>
				</u-col>
				<u-col span="8.5">
					<p class="text-title" style="width: 100%;">
						<span class="left">{{commodity.commodityName}}</span>
						<span class="right" style="color:#E06181">￥{{commodity.favorablePrice}}</span>
					</p>
					<!-- <p class="text-light">{{spec}}</p> -->
					<p style="width: 100%;">
						<span class="text-light" v-for="service in serviceList">
							<u-tag :text="service" plain size="mini" type="warning" class="tag-box"></u-tag>
						</span>
					</p>
					<p>
						<u-number-box
							button-size="24"
							color="#3CCCA6"
							bgColor="#f5f5f5"
							iconStyle="color: #3CCCA6"
							integer
							v-model="commodity.number"
							class="right"
							style="margin-top: 6px;"
						></u-number-box>
					</p>
				</u-col>
			</u-row>
		</view>
		<view class="view-box">
			<p class="text-title">价格明细</p>
			<view v-for ="com in commodityList">
				<p>
					<span class="text-dark ">商品单价：</span>
					<span class="text-dark right" style="font-size:20px">￥{{com.favorablePrice}}</span>
				</p>
				<p>
					<span class="text-dark ">商品数量：</span>
					<span class="text-dark right" style="font-size:20px">X{{com.number}}</span>
				</p>
			</view>
			<view>
				<p>
					<span class="text-dark ">合计：</span>
					<span class="text-dark right" style="font-size:20px">
						￥{{sumPrice}}
					</span>
				</p>
				<p>
					<span class="text-dark ">优惠券：</span>
					<span @click="openCouponPopup" class="text-dark right" style="font-size:20px">></span>
				</p>
			</view>
		</view>
		<view class="view-box">
			<u-radio-group
			v-model="payRadio"
			placement="column"
			@change="groupChange"
			>
				<u-radio
				:customStyle="{marginBottom: '8px'}"
				:key="1"
				:label="1"
				:name="1"
				@change="radioChange"
				>
					<u-icon name="weixin-circle-fill" size="24" color="#01C705" style="margin:0 6px"></u-icon>
					微信支付（推荐）
				</u-radio>
				<u-radio
				:customStyle="{marginBottom: '8px'}"
				:key="2"
				:label="2"
				:name="2"
				@change="radioChange"
				>
					<u-icon name="zhifubao-circle-fill" size="24" color="#0E78FF" style="margin:0 6px"></u-icon>
					支付宝支付
				</u-radio>
			</u-radio-group>
		</view>
		<view class="bottom-nav">
			<u-button text="提交订单" class="right" customStyle="width:120px;margin-top:10px"
			color="#E06181" shape="circle" @click="submitOrder()"></u-button>
			<span class="right text-light" style="color:#E06181;font-size:20px">
				￥{{sumPrice}}
			</span>
			<span class="right text-title">合计：</span>
			<span class="right text-light" >共 {{sumCount}} 件</span>
		</view>
		<!-- 退出弹窗 -->
		<view>
			<u-modal :showConfirmButton="false" :show="exitPopup" width="260px">
				<view style="text-align:center;margin-bottom:20px;">
					确认放弃付款嘛?
				</view>
				<view style="margin-bottom:20px;">
					<u-button @click="confirmPayment" style="background:#FF4444;color: #fff;border:none;" text="继续支付"></u-button>
				</view>
				<view>
					<u-button @click="giveUpTemporarily" style="color:grey;border:none;background:#fff;" text="暂时放弃"></u-button>
				</view>
			</u-modal>
		</view>
		<u-popup :closeable="true" :show="show" mode="bottom":round="20" @close="close">
			<view style="width: 100%;background:#F7F8FA;border-radius: 10px;">
				<view style="width: 100%;height: 50px;line-height: 50px;">
					<span style="margin-left: 15px">优惠券</span>
				</view>
				<view style="width: 100%;height: 310px;background: palegoldenrod;">
					<view style="width:100%;height: 30px;line-height:30px;">
						<view @click="availableCoupon" class="available">
							可用优惠券
						</view>
						<view @click="unavailableCoupon" class="unavailable">
							不可用优惠券
						</view>
					</view>
					<view v-show="available" style="width:100%;height: 50px;background:palegreen;margin-top:10px;">
						<view style="width:100%;margin-left:15px;">
							1111
						</view>
					</view>
					<view v-show="unavailable" style="width:100%;height: 50px;background:palegreen;margin-top:10px;">
						<view style="width:100%;margin-left:15px;">
							2222
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//订单信息
				commodityInfo:{},
				//收货地址
				address:{},
				//商品信息列表
				commodityList:[],
				//diy信息列表
				diyList:[],
				//地址id
				addressId:0,
				//商品id
				commodityId:0,
				//服务列表
				serviceList:[],
				//数量
				numbers:1,
				//优惠券
				discountCoupon:0,
				//支付方法
				payRadio:1,
				// 判断弹出退出弹窗
				exitPopup: false,
				id: '',
				// 判断是否打开优惠券弹窗
				show: false,
				// 
				available: true,
				// 
				unavailable: false,
				//总价
				sumPrice:0,
				//总数
				sumCount:0
			}
		},
		onLoad(option){
			debugger
			this.id = option.id
			const commodityInfo = JSON.parse(decodeURIComponent(option.commodityInfo))
			this.commodityInfo = commodityInfo
			this.addressId = commodityInfo.addressId
			this.userId = wx.getStorageSync('user').id
			this.commodityIds = commodityInfo.commodityIds.join(',')
			this.diyIds = commodityInfo.diyIds
			// this.spec = commodityInfo.commoditySpec
			this.serviceList = commodityInfo.serviceList
			this.numbers = commodityInfo.numbers
			this.getAddressById()
			this.getCommodityListByIds()
			this.selectUserCoupon()
			
		},
		watch: {
			commodityList: { 
				// 数据变化时执行的逻辑代码
				handler(newName, oldName){
					this.getSumPriceAndCount()
					}, 
				// 开启深度监听
				deep: true 
			}
		},
		methods: {
			submitOrder(){
				let commodityList =[]
				for (var i = 0; i < this.commodityList.length; i++) {
					let com = {
						// 商品id
						id:this.commodityList[i].id,
						number:this.commodityList[i].number,
						totalPrice:this.commodityList[i].favorablePrice
					}
					commodityList.push(com)
				}
				this.$myRequest({
					method:'POST',
					url: '/seckill/submitOrder',
					data:{
						diyArr: JSON.stringify(this.diyList),
						commodityArr: JSON.stringify(commodityList),
						orderAmountTotal:this.sumPrice,
						commodityAmountTotal: 0,
						userId:this.userId,
						payModeId:this.payRadio,
						addressId:this.addressId,
						freight:0
					},
				}).then(res => {
					if(res.data.flag){
						//订单生成成功
						uni.showToast({
							icon: 'success',
							title: '下单成功，请你麻溜的付款',
							// 显示时长时间为3秒
							duration: 3000,
						})
						uni.navigateTo({
							url:'/pages/my/MyOrder'
						})
						console.log(res.data.data)
					}else{
						//订单生成成功
						uni.showToast({
							icon: 'warning',
							title: '下单失败',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}
				})
			},
			//计算总数和总价
			getSumPriceAndCount(){
				this.sumPrice = 0
				this.sumCount = 0
				for (var i = 0; i < this.commodityList.length; i++) {
					this.sumPrice = this.commodityList[i].number*this.commodityList[i].favorablePrice+this.sumPrice
					this.sumCount = this.commodityList[i].number+this.sumCount
				}
			},
			// 根据用户id查询用户可用的优惠券
			selectUserCoupon(){
				this.$myRequest({
					url: '/newDaily/selectUserCoupon',
					data: {
						userId : this.userId
					}
				}).then(res => {
					this.discountCoupon = res.data.data
				})
			},
			// 打开优惠券弹窗
			openCouponPopup(){
				this.show = true
			},
			//根据id查询地址
			getAddressById(){
				if(this.addressId!=0){
					this.$myRequest({
						url: '/commodity/detail/getAddressById',
						data: {
							addressId: this.addressId
						}
					}).then(res => {
						this.address = res.data.data
					})
				}
			},
			//根据id查询商品列表
			getCommodityListByIds() {
				debugger
				this.$myRequest({
					url: '/commodity/detail/getCommodityListByIds',
					data: {
						ids: this.commodityIds
					}
				}).then(res => {
					this.commodityList = res.data.data
					console.log(this.commodityList)
					for (var i = 0; i < this.commodityList.length; i++) {
						this.commodityList[i].number = this.numbers[i]
						this.sumPrice =this.commodityList[i].number*this.commodityList[i].favorablePrice+this.sumPrice
						this.sumCount = this.commodityList[i].number+this.sumCount
					}
					console.log(this.commodityList)
				})
			},
			// 点击暂时放弃跳转到上一级页面
			giveUpTemporarily(){
				this.backPage()
				// uni.navigateTo({
				// 	//保留当前页面，跳转到应用内的某个页面
				// 	url: '/pages/index/FlashBuyingPage?id='+this.id
				// })
			},
			//返回上一页
			backPage(){
				//获取所有页面栈实例列表
				let pages = getCurrentPages(); 
				//当前页页面实例
				let nowPage = pages[pages.length - 1]; 
				//上一页页面实例
				let prevPage = pages[pages.length - 2]; 
				//修改上一页data里面的地址
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
					success:(event)=>{
					}
				})
			},
			// 点击确认支付退出弹窗关闭
			confirmPayment(){
				this.exitPopup = false
			},
			// 点击返回按钮弹出退出弹窗
			PopUpExitBox(){
				this.exitPopup = true
			},
			//跳转至收货地址页面
			toAddressPage(){
				uni.navigateTo({
					url:'/pages/goods/AddressView'
				})
			},
			// 关闭优惠券弹窗方法
			close() {
				this.show = false
			},
			availableCoupon(){
				this.available = true
				this.unavailable = false
			},
			unavailableCoupon(){
				this.available = false
				this.unavailable = true
				
			}
		},
	}
</script>
<style lang="scss" scoped>
	.available{  
		width:50%;
		float:left;
		text-align:center;
	}
	.unavailable{
		width:50%;
		float:left;
		text-align:center;
	}
	/**
	 * 公共样式 ↓
	 */
	.left{
		float:left
	}
	.right{
		float:right
	}
	.text-title {
		//文字标题样式
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.text-dark {
		//深色文字样式
		font-size: 14px;
		color: #666666;
	}

	.text-light {
		//浅色文字样式
		font-size: 14px;
		color: #999999;
	}

	.text-center {
		//居中文字样式
		text-align: center;
	}
	.tag-box{
		width:72px;
		text-align:center;
		margin-right:2px;
	}
	.view-box {
		line-height: 28px;
		background: #fff;
		padding: 16px 10px;
		margin-bottom: 6px;
	}
	/**
	 * 公共样式 ↑
	 */
	.box{
		width: 96%;
		margin-left: 2%;
		background: #f5f5f5;
	}
	
	.bottom-nav {
		width: 100%;
		height: 60px;
		line-height: 60px;
		font-size: 14px; 
		color: #ffffff;
		background: #ffffff;
		position: fixed;
		bottom: 0
	}
	.bottom-nav .right{
		margin: 0 4px;
	}
	/deep/.u-modal__content[data-v-0156a215] {
	  padding: 12px 25px 25px 25px;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}
	/deep/.u-button--info[data-v-2bf0e569] {
	    /* background-color: #FF4444; */
	    /* border-color: #ebedf0; */
			border-radius: 20px;
	}
</style>